技術問答
技術文章
iT 徵才
Tag
聊天室
2023 鐵人賽
登入/註冊
問答
文章
Tag
邦友
鐵人賽
搜尋
2017 iT 邦幫忙鐵人賽
DAY
21
0
自我挑戰組
你看微客=[ 前端領域 - 超入門 ]
系列 第
21
篇
RWD---[ 響應式網站 ( 四 ) ]---無用小觀念
2017鐵人賽
ucvic
2017-01-02 17:43:18
1810 瀏覽
分享至
響應式網站 ( 四 )
製作響應式網站時,請記得
行動優先
(
mobile first
)的觀念,不僅是因為行動裝置已經逐漸變成瀏覽 WEB 的主流,更重要的是因為行動裝置的限制較多,無論是螢幕大小或互動方式( 觸控 ),都是比較不容易處理駕馭的,故有必要在設計初期預先考量。
hover 事件不易轉換到行動裝置(因為現階段你不太可能用指尖懸在螢幕上不觸碰的方式,來去觸發事件),通常轉換成雙擊的方式來操作 ; 一次點擊視為 hover,快速雙擊才會觸發 click,但這樣的方式操作上不太靈巧,
建議儘量避免使用 hover
。
觸控目標元件的尺寸建議不要小於 44 * 44 像素
。
可嘗試
利用增加目標元素內邊距( padding )的方式增加觸控面積
。
響應式網站在行動裝置上呈現時,
導覽列的位置建議放在螢幕底部
,可使手指容易觸控且不易擋到螢幕畫面。
在開始設計之前,請先決定網站主要要支援哪些裝置和瀏覽器,通常都會選擇具代表性的常見裝置
,因為實作上你很難把所有的裝置都測試一遍,但這樣做可以確保網站在你選擇的主要裝置上正常運作。
留言
追蹤
檢舉
上一篇
RWD---[ 響應式網站 ( 三 ) ]---無用小觀念
下一篇
RWD---[ 響應式網站 ( 五 ) ]---無用小觀念
系列文
你看微客=[ 前端領域 - 超入門 ]
共
30
篇
目錄
RSS系列文
訂閱系列文
17
人訂閱
26
React---[ 自訂元件、props特性 ]---無用小觀念
27
React---[ state 狀態、事件處理 ]---無用小觀念
28
React---[ JSX ]---無用小觀念
29
Git---[ Git 基本觀念 ]
30
30天鐵人賽---[ 參賽心得 ]
完整目錄
直播研討會
{{ item.subject }}
{{ item.channelVendor }}
{{ item.webinarstarted }}
|
{{ formatDate(item.duration) }}
直播中
立即報名
尚未有邦友留言
立即登入留言
iThome鐵人賽
參賽組數
1123
組
團體組數
52
組
累計文章數
23096
篇
完賽人數
656
人
看影片追技術
看更多
{{ item.subject }}
{{ item.channelVendor }}
|
{{ formatDate(item.duration) }}
直播中
熱門tag
看更多
15th鐵人賽
13th鐵人賽
14th鐵人賽
12th鐵人賽
11th鐵人賽
鐵人賽
2019鐵人賽
2018鐵人賽
javascript
2017鐵人賽
python
windows
php
c#
windows server
linux
css
react
程式設計
vue.js
熱門問題
公司有人常常亂改IP位置(想問有甚麼辦法可以將IP鎖住不給更改)
請問我晚上開發一款工具,早上給公司使用,沒特別條款,法律知識產權還是我的嗎?
請教外網如何連到家裡內部裝置
自家官網連線不到 (已解決)
請問公司網路通暢,卻部分固定的使用者無法連到特定網頁 ,求救~~~
請教各位前輩關於 IT 管理者為 User 重設 AD 帳號的密碼的行政流程
自我改善工作人際態度邊界
遠端連線到虛擬機器上,並希望能聽到音效
ISO 27001改版輔導顧問公司推薦
請問有提供對外http連線服務的主機,都需要上SSL嗎?
熱門回答
公司有人常常亂改IP位置(想問有甚麼辦法可以將IP鎖住不給更改)
請問公司網路通暢,卻部分固定的使用者無法連到特定網頁 ,求救~~~
自家官網連線不到 (已解決)
請問有提供對外http連線服務的主機,都需要上SSL嗎?
遠端連線到虛擬機器上,並希望能聽到音效
熱門文章
筆電Wifi不見後, 筆電該怎麼上網?
在任何雲端上運行:雲端的可移植性你有考慮過嗎?
[C#] Remove Element 解法
使用JS解構賦值踩到的雷
幫多階段 Dockerfile 除錯紀錄
IT邦幫忙
×
標記使用者
輸入對方的帳號或暱稱
Loading
找不到結果。
標記
{{ result.label }}
{{ result.account }}